let initData = {
    initData: {
        page: [
            {
                rowitem: [
                    {'key': 'goodsState', 'value': '状态', Seek: 'Ascending', path: 'goodsState'},
                    {'key': 'goodsName', 'value': '商品名称', Seek: 'Ascending', path: 'goodsName'},
                    {'key': 'goodsId', 'value': '商品编号', Seek: 'Ascending', path: 'goodsId'},
                    {'key': 'goodsPrice', 'value': '零售价', Seek: 'Ascending', path: 'goodsPrice'},
                    {'key': 'stockNumber', 'value': '库存信息', Seek: 'Ascending', path: 'stockNumber'},
                    {'key': 'createTime', 'value': '创建时间', Seek: 'Ascending', path: 'createTime'},
                    {'key': 'operating', 'value': '操作'},
                ],
            },
            {
                rowitem: [
                    {'key': 'goodsState', 'value': '上架'},
                    {'key': 'goodsName', 'value': '隐和田玉青玉青海料AA级'},
                    {'key': 'goodsId', 'value': ' SKU6583'},
                    {'key': 'goodsPrice', 'value': '200'},
                    {'key': 'stockNumber', 'value': '5'},
                    {'key': 'createTime', 'value': '2019/2/18 14:31'},
                    {'key': 'operating', revisePath: 'AAA', viewPath: 'BBB', deletePath: 'CCC'},
                ],
            },
            {
                rowitem: [
                    {'key': 'goodsState', 'value': '上架'},
                    {'key': 'goodsName', 'value': '隐和田玉青玉青海料AA级'},
                    {'key': 'goodsId', 'value': ' SKU6583'},
                    {'key': 'goodsPrice', 'value': '200'},
                    {'key': 'stockNumber', 'value': '5'},
                    {'key': 'createTime', 'value': '2019/2/18 14:31'},
                    {'key': 'operating', viewPath: 'BBB', deletePath: 'CCC'},
                ],
            },
            {
                rowitem: [
                    {'key': 'goodsState', 'value': '上架'},
                    {'key': 'goodsName', 'value': '隐和田玉青玉青海料AA级'},
                    {'key': 'goodsId', 'value': ' SKU6583'},
                    {'key': 'goodsPrice', 'value': '200'},
                    {'key': 'stockNumber', 'value': '5'},
                    {'key': 'createTime', 'value': '2019/2/18 14:31'},
                    {'key': 'operating', viewPath: 'BBB'},
                ],
            },
            {
                rowitem: [
                    {'key': 'goodsState', 'value': '上架'},
                    {'key': 'goodsName', 'value': '隐和田玉青玉青海料AA级'},
                    {'key': 'goodsId', 'value': ' SKU6583'},
                    {'key': 'goodsPrice', 'value': '200'},
                    {'key': 'stockNumber', 'value': '5'},
                    {'key': 'createTime', 'value': '2019/2/18 14:31'},
                    {'key': 'operating', viewPath: 'BBB'},
                ],
            },
            {
                rowitem: [
                    {'key': 'goodsState', 'value': '上架'},
                    {'key': 'goodsName', 'value': '隐和田玉青玉青海料AA级'},
                    {'key': 'goodsId', 'value': ' SKU6583'},
                    {'key': 'goodsPrice', 'value': '200'},
                    {'key': 'stockNumber', 'value': '5'},
                    {'key': 'createTime', 'value': '2019/2/18 14:31'},
                    {'key': 'operating', viewPath: 'BBB'},
                ],
            },
            {
                rowitem: [
                    {'key': 'goodsState', 'value': '上架'},
                    {'key': 'goodsName', 'value': '隐和田玉青玉青海料AA级'},
                    {'key': 'goodsId', 'value': ' SKU6583'},
                    {'key': 'goodsPrice', 'value': '200'},
                    {'key': 'stockNumber', 'value': '5'},
                    {'key': 'createTime', 'value': '2019/2/18 14:31'},
                    {'key': 'operating', viewPath: 'BBB'},
                ],
            },
            {
                rowitem: [
                    {'key': 'goodsState', 'value': '上架'},
                    {'key': 'goodsName', 'value': '隐和田玉青玉青海料AA级'},
                    {'key': 'goodsId', 'value': ' SKU6583'},
                    {'key': 'goodsPrice', 'value': '200'},
                    {'key': 'stockNumber', 'value': '5'},
                    {'key': 'createTime', 'value': '2019/2/18 14:31'},
                    {'key': 'operating', viewPath: 'BBB'},
                ],
            },
            {
                rowitem: [
                    {'key': 'goodsState', 'value': '上架'},
                    {'key': 'goodsName', 'value': '隐和田玉青玉青海料AA级'},
                    {'key': 'goodsId', 'value': ' SKU6583'},
                    {'key': 'goodsPrice', 'value': '200'},
                    {'key': 'stockNumber', 'value': '5'},
                    {'key': 'createTime', 'value': '2019/2/18 14:31'},
                    {'key': 'operating', viewPath: 'BBB'},
                ],
            },
            {
                rowitem: [
                    {'key': 'goodsState', 'value': '上架'},
                    {'key': 'goodsName', 'value': '隐和田玉青玉青海料AA级'},
                    {'key': 'goodsId', 'value': ' SKU6583'},
                    {'key': 'goodsPrice', 'value': '200'},
                    {'key': 'stockNumber', 'value': '5'},
                    {'key': 'createTime', 'value': '2019/2/18 14:31'},
                    {'key': 'operating', viewPath: 'BBB'},
                ],
            }
        ],
        canAllChecked: true,                                                                                               //是否需要批量选择
        serial: true,                                                                                                      //是否需要序列号
        maxLength: 12,
        pageFooter: {'footerLength': 5, path: "go", prepath: "pre", nextpath: "next"},
        path: "ASDDAS"
    }
};
window.onload = function () {
    describeView(initData.initData)
};

function describeView(data) {
    let viewData = data.page ? data.page : [];
    let max = data.maxLength ? data.maxLength : 10;
    let pageFooter = data.pageFooter ? data.pageFooter : false;
    let table = document.createElement('table');                                                                         //创建表格
    table.className = 'table table-bordered';
    let formHeaderArray = [];                                                                                            //校验数组
    let finalString = '';                                                                                                //最终字符
    let footerString = '';                                                                                               //分页字符
    if (pageFooter) {
        let footerLength = pageFooter.footerLength;
        for (let i = 0; i < footerLength; i++) {
            footerString += `<li><a href="#" onclick="onSubmit('${pageFooter.path}',{'goToPage':${i + 1}})">${i + 1}</a></li>`
        }
        footerString = `
                    <nav aria-label="Page navigation" class="center">
                      <ul class="pagination pagination-lg">
                        <li>
                          <a href="#" aria-label="Previous" onclick="onSubmit('${pageFooter.prepath}',{})">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                            ` + footerString + `
                         <li>
                           <a href="#" aria-label="Next" onclick="onSubmit('${pageFooter.nextpath}',{})">
                             <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>
                    `;
    }
    ;                                                                                                 //判断是否需要分页
    try {
        viewData.forEach((item, j) => {                                                                                   //循环行
            let viewRowData = item.rowitem;
            let tr = document.createElement('tr');
            let canAllChecked = data.canAllChecked ? `<input type="checkbox"/>` : '';
            let serial = data.serial ? `<td class="table-bordered center">${j === 0 ? '#' : j}</td>` : '';
            let trInnerHTNL = `<td class="table-bordered center">${canAllChecked}${serial}</td>`;                         //判断是否需要加入全选按钮
            viewRowData.forEach((item, i) => {                                                                             //循环每个单元格
                let appendString = '';
                if (j === 0) {                                                                                              //循环第一行拿到key值用于校验
                    formHeaderArray.push(item.key);
                }
                if (item.key === formHeaderArray[i] || !formHeaderArray[i]) {
                    if (item.viewPath || item.deletePath || item.revisePath) {                                                   //判断每个单元格应该放哪些内容
                        let viewPathString = item.viewPath ? `<button class="btn btn-default" onclick="onSubmit('${item.viewPath}',{})">查看</button>` : '';
                        let deletePathString = item.deletePath ? `<button class="btn btn-default" onclick="onSubmit('${item.deletePath}',{})">删除</button>` : '';
                        let revisePathString = item.revisePath ? `<button class="btn btn-default" onclick="onSubmit('${item.revisePath}',{})">修改</button>` : '';
                        appendString = `<td class="table-bordered center flex">${viewPathString}${deletePathString}${revisePathString}</td>`;
                    } else if (item.value && item.path) {
                        appendString = `<td class="table-bordered center" onclick=onSubmit('${item.path}',{'Seek':'${item.Seek}','key':'${item.key}'})>${item.value}</td>`;
                    } else {
                        appendString = `<td class="table-bordered center">${item.value}</td>`;
                    }
                } else {
                    appendString = `<td class="table-bordered center"></td>`;
                }
                trInnerHTNL += appendString;
            })
            tr.innerHTML = trInnerHTNL;
            table.appendChild(tr);
            if (j === max) {
                throw new Error("Enditerative")                                                                             //当单页长度超出上限时跳出循环
            }
        })
        finalString = domToString(table) + footerString;
    } catch (e) {
        finalString = domToString(table) + footerString;
        document.querySelector('body').innerHTML = finalString;                                                             //最终返回表格加上分页的String形式
    }
    document.querySelector('body').innerHTML = finalString;
    console.log(formHeaderArray);
    console.log(domToString(table));
}

function domToString(dom) {
    let oDiv = document.createElement('div');
    oDiv.appendChild(dom);
    let returnString = oDiv.innerHTML.toString();
    oDiv = null;
    return returnString;
}

function onSubmit(path, data) {
    console.log(path, data);
}
